<template>
	<view class="chooseCouponStyle">
		<view class="couponList">
			<scroll-view :scroll-y="true" style="height: 100%;">
				<CouponItem v-for="(item, index) in couponList" :key="item.id" :showBtn="false" :coupon="item"
					@onClick="onClick" :isUnusable="!item.isAvailableUsed" />
			</scroll-view>
		</view>
		<view class="couponFooter" :style="{paddingBottom: isIphoneX ? 'env(safe-area-inset-bottom)' : '20rpx'}">
			<view class="footerBtn" @click="resetChoose">不使用优惠券</view>
		</view>
	</view>
</template>

<script>
	import CouponItem from '@/components/couponItem/index.vue'
	import utils from '@/common/utils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		name: 'chooseCoupon',
		components: {
			CouponItem
		},
		data() {
			return {
				isIphoneX: false,
			}
		},
		onLoad() {
			utils.checkIphoneX().then(res => this.isIphoneX = res);
		},
		onUnload() {
			this.$store.commit('cleanSelectCouponList')
		},
		methods: {
			resetChoose() {
				this.$store.commit('cleanSelectCouponItem')
				uni.navigateBack()
			},
			onClick(coupon) {
				if (!coupon.isAvailableUsed) {
					return
				}
				this.$store.commit('setSelectCouponItem', coupon)
				uni.navigateBack()
			}
		},
		computed: {
			couponList() {
				return this.$store.getters['getSelectCouponList']
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseCouponStyle {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.couponList {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 30rpx 0;
			margin-bottom: 20rpx;
		}

		.footerBtn {
			height: 96rpx;
			margin: 0 30rpx;
			background: linear-gradient(180deg, #46C09E 0%, #156D4F 100%);
			border-radius: 24rpx;
			line-height: 96rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
